<template>
    <div class="employee-content">
        <h1>假装这里有数据</h1>
        <el-button type="primary" @click="showAddModule"
            >添加组织单元</el-button
        >
        <div class="add-organization" v-show="isShow">
            <div class="close-button" @click="hideAddModule">
                <i class="el-icon-close"></i>
            </div>
            <div>
                <div class="dialog-title">
                    <span>添加组织单元</span>
                </div>
                <el-form
                    :model="ruleForm"
                    :rules="rules"
                    ref="ruleForm"
                    label-width="100px"
                    class="employee-form"
                >
                    <el-form-item label="组织单元名称：" prop="companyName">
                        <el-input
                            v-model="ruleForm.companyName"
                            placeholder="请输入组织单元名称"
                        ></el-input>
                    </el-form-item>
                    <el-form-item label="上级组织单元：" prop="superior">
                        <el-cascader
                            ref="cascader"
                            v-model="ruleForm.value"
                            :options="ruleForm.superior"
                            :props="{ checkStrictly: true }"
                            clearable
                        ></el-cascader>
                    </el-form-item>
                </el-form>
                <footer class="fixed-buttons-container">
                    <el-button @click="hideAddModule">取消</el-button>
                    <el-button type="primary" @click="addOrganization"
                        >确认</el-button
                    >
                </footer>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    props: {
        /** 统一的组织树 */
        treeList: {
            type: Array,
            required: true
        },

        /** 级联组件默认选中的上级 */
        propSuperior: {
            type: Array
        }
    },
    data() {
        return {
            /** 添加组织单元的显示标志位 */
            isShow: false,

            /** 添加单元的信息 */
            ruleForm: {
                companyName: '',
                superior: this.treeList,
                value: ['维森集团有限公司']
            },

            // 表单规则
            rules: {
                companyName: [
                    {
                        required: true,
                        message: '组织单元名称不能为空',
                        trigger: 'blur'
                    }
                ],
                superior: [{ required: true, trigger: 'blur' }]
            }
        }
    },
    methods: {
        /** 显示添加组织单元 */
        showAddModule() {
            this.isShow = true
        },
        /** 隐藏 */
        hideAddModule() {
            this.isShow = false
        },

        /** 点击创建组织单元，上抛外部处理 */
        addOrganization() {
            // 获取当前被选择节点的子节点
            const currentChildren = this.$refs.cascader.getCheckedNodes()

            // 在同一级下组织名唯一
            const hasSameCompanyName = currentChildren[0].children.some(
                item => {
                    return item.value === this.ruleForm.companyName
                }
            )
            if (hasSameCompanyName) {
                this.$message({
                    message: '同一级别下部门名称不能重复',
                    type: 'info'
                })
                return
            }

            // 携带添加的组织的基本内容
            this.$emit('addOrganizationNode', {
                companyName: this.ruleForm.companyName, // 添加组织名
                parentNodeId: this.$refs.cascader.getCheckedNodes()[0].data.id // 添加到的父节点位置id
            })

            // 添加后隐藏
            this.hideAddModule()
        }
    },
    watch: {
        propSuperior(val) {
            this.ruleForm.value = val
        },
        treeList(val) {
            this.ruleForm.superior = val
        }
    }
}
</script>

<style lang="less" scoped>
.organization-content > .employee-content {
    border-left: 1px solid #e8e8e8;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 275px;
    right: 0;
    background-color: #fff;
    overflow-y: auto;
}

/** 添加组织单元样式 */
.add-organization {
    width: 600px;
    position: fixed;
    overflow: hidden;
    top: 60px;
    bottom: 0;
    right: 0;
    z-index: 1;
    background: #fff;
    box-shadow: -1px 2px 4px 0 rgba(0, 0, 0, 0.22);
    /* 顶部title */
    .close-button {
        position: absolute;
        right: 20px;
        top: 15px;
        font-size: 20px;
        z-index: 2;
        cursor: pointer;
    }
    .dialog-title {
        text-align: left;
        font-size: 16px;
        color: #001330;
        line-height: 16px;
        padding: 16px 24px;
        border-bottom: 1px solid #e5e7ea;
    }
}

/** 表单 */
/deep/ .employee-form {
    width: 600px;
    padding: 24px;
    .el-form-item {
        width: 400px;
        margin-bottom: 22px;
        .el-form-item__content {
            margin-left: 150px !important;
            .el-cascader {
                width: 100%;
            }
        }
        .el-form-item__label {
            width: 150px !important;
            text-align: left;
        }
    }
}

/** 底部btn */
/deep/ .fixed-buttons-container {
    background: #fff;
    width: 100%;
    position: absolute;
    right: 0;
    bottom: 0;
    border-top: 1px solid #e6e6e6;
    text-align: right;
    button {
        margin: 15px 30px 15px 0;
    }
}
</style>
